<template>
	<view class="bigbox">
		
		<view class="back" @click.stop="back()">
			<view class="backzhezhao"></view>
			<image src="../../static/images/back3.png"></image>
		</view>
		
		<view style="position: fixed;top: 0;z-index: 9999;" class="w100" v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white" v-if="show_ad"></ad>
		</view>
		<view :class="show_ad?'mt580':''" class="box" 
				:style="{backgroundImage:'url('+info.bg_img+')'}"
				>
			<view class="tujiantitle " style="padding-top: 7.2%;font-size: 6vw;height: 100rpx;line-height: 100rpx;">奥特曼图鉴</view>
			<view class="name hidden1">{{info.name}}</view>
			<view class="renjianti name">人间体：{{info.renjianti?info.renjianti:'无/未知'}}</view>
			<view class="flex flex_jc main_pic" >
				<view class="bg_img">
					<u-image width="100%" height="100%" :src="info.qiu1"></u-image>
				</view>
				<view class="bg_img2">
					<u-image width="100%" height="100%" :src="info.qiu2"></u-image>
				</view>
				<view class="icon">
					<u-image width="100%" height="100%" :src="info.icon"></u-image>
				</view>
			</view>
			<view class="shuxing_box flex flex_jc">
				<view class="shuxing flex">
					<view class="s5">
						<view class="v1">出生地</view>
						<view class="v2">{{info.birth}}</view>
					</view>
					<view class="s5">
						<view class="v1">身高</view>
						<view class="v2">{{info.height}}</view>
					</view>
					<view class="s5">
						<view class="v1">体重</view>
						<view class="v2">{{info.weight}}</view>
					</view>
					<view class="s5">
						<view class="v1">年龄</view>
						<view class="v2">{{info.age}}</view>
					</view>
					<view class="s5">
						<view class="v1">飞行速度</view>
						<view class="v2">{{info.fly_speed}}</view>
					</view>
					<view class="s5">
						<view class="v1">地中速度</view>
						<view class="v2">{{info.speed}}</view>
					</view>
					<view class="s5">
						<view class="v1">水中速度</view>
						<view class="v2">{{info.water_speed}}</view>
					</view>
					<view class="s5">
						<view class="v1">跳跃力</view>
						<view class="v2">{{info.jump}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box2" 
		 :style="{backgroundImage:'url('+info.bg_img2+')'}"
			>
			<view class="shuxing_box2 flex flex_jc">
				<view class="shuxing flex">
					<view class="s5">
						<view class="v1">力量</view>
						<view class="v2">{{info.power}}</view>
					</view>
					<view class="s5">
						<view class="v1">职业</view>
						<view class="v2">{{info.career?info.career:'无/未知'}}</view>
					</view>
					<view class="s5">
						<view class="v1">爱好</view>
						<view class="v2">{{info.hobby?info.hobby:'未知'}}</view>
					</view>
					<view class="s5">
						<view class="v1">必杀技</view>
						<view class="v2">{{info.skill}}</view>
					</view>
					<view class="s5">
						<view class="v1">变身器</view>
						<view class="v2">{{info.bianshenqi?info.bianshenqi:'无/未知'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box3" style="background-image: url('');">
			<view class="intro_box flex flex_vc">
				<view class="intro">
					<view class="title">简介</view>
					<view class="content">{{info.desc}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getAotemanDetail} from "@/api/api"
	import {getDateDiff} from "@/utils/common"
	export default {
		data() {
			return {
				info:[],
				aoteman_id:0,
				gif_hieght:0,
				gif_width:0,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				
			}
		},
		
		onShareAppMessage(e) {
		},
		onShareTimeline(e) {
		},
		
		onLoad: function (option) {
			this.aoteman_id = option.id
			getAotemanDetail(this.aoteman_id).then(res=>{
				this.info = res.data
				uni.setNavigationBarTitle({
					title:res.data.name
				})
			})
		},
		
		methods: {
			back(){
				const pages = getCurrentPages();
				console.log(pages.length)
				if (pages.length === 2) {
					console.log('back1')
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					console.log('back2')
					uni.redirectTo({
						url: '/pages/index/index',
					})
				} else if(pages.length > 1) {
					console.log('back3')
					uni.navigateBack({
						delta: 1
					});
				}else{
					console.log('back4')
					uni.redirectTo({
						url: '/pages/index/index',
					})
				}
			}
		}
	
	}
</script>
<style>
	.u-transition{width: 100%;height: 100%;}
</style>
<style scoped>
	.intro .content{font-size: 5.4vw;color: #FFFFFF;padding: 20px;text-align: center;}
	.intro .title{display: block;text-align: center; width: 100%;color: #b3eafe;line-height: 1;white-space: nowrap;font-size: 6vw;padding-top: 30rpx;}
	.intro{border: 2.25px solid #466e9b;border-radius: 37.5px;width: 700rpx;text-align: left;}
	.shuxing .v2{color: #FFFFFF;font-family: "Noto Sans",Arial,sans-serif;padding-top: 15rpx;overflow: hidden;text-overflow: ellipsis;
		display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical}
	.shuxing .v1{color: #b3eafe;font-family: "Noto Sans",Arial,sans-serif;padding-top: 30rpx;}
	.shuxing .s5{width: 50%;text-align: left;}
	.shuxing .s10{width: 100%;text-align: left;}
	.shuxing{flex-wrap: wrap;font-size: 5.4vw;width: 600rpx;}
	.shuxing_box{width: 100%;padding-top: 100rpx;}
	.intro_box{width: 100%;padding-top: 50rpx;}
	.shuxing_box2{width: 100%;}
	.renjianti{font-size: 4vw!important;height: 50rpx!important;line-height: 50rpx!important;padding-top: 0!important;}
	.icon{width: 250rpx;height: 533rpx;position: absolute;left: 0;right: 0;top: 100rpx;margin: 0 auto;}
	.bg_img2{width: 600rpx;height: 600rpx;position: absolute;left: 0;right: 0;top: 72rpx;margin: 0 auto;}
	.bg_img{width: 730rpx;height: 730rpx;}
	.name{text-shadow: 0 0 3px #000, 2px 2px 7px #9be1ff, -2px -2px 7px #9be1ff;font-size: 10vw;color: #FFFFFF;font-size: 6vw;height: 100rpx;
	line-height: 100rpx;padding-top: 30rpx;}
	.tujiantitle{font-family: "Noto Sans",Arial,sans-serif;}
	.main_pic{width: 100%;position: relative;margin-top: 150rpx;}
	.box2{height: 1000rpx;}
	.box,.box2,.box3{width: 100%;   background-position: top;
    background-repeat: no-repeat,repeat;
    background-size: 100% auto;
    background-color: #0a141e;text-align: center;}
	.bg_img{animation: rotate-anime 3s linear infinite;}
	@-webkit-keyframes rotate-anime{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
	@keyframes rotate-anime{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
	
</style>